<template>
  <div class="axios">
    <h1>Axios</h1>
    <el-text type="primary">Here is the data from the API: </el-text>
    <el-button type="primary" @click="getQingHua">Get</el-button>
    <ul>
      <li v-for="d in demos" :key="d.code">{{ d.content }}</li>
    </ul>

    <el-text type="primary">获取用户列表： </el-text>
    <el-button type="primary" @click="findAllUser">Refresh</el-button>
    <ol>
      <li v-for="d in users" :key="d.id">{{ d.name }}（{{ d.gender }}，{{ d.birth }}）</li>
    </ol>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import demo from '@/api/demo'
import type { QingHuas } from '@/api/demo/types'
import user from '@/api/sys/user'
import type { Users } from '@/api/sys/types/user'

let demos = ref<QingHuas>([])
async function getQingHua() {
  const data = await demo.getQinghua()
  demos.value.push(data)
}

let users = ref<Users>([])
async function findAllUser() {
  const data = await user.findAll()
  users.value = data
}

onMounted(() => {
  getQingHua()
  findAllUser()
})
</script>

<style scoped>
@media (min-width: 1024px) {
  .axios {
    min-height: 100vh;
    padding: 20px;
  }
}
</style>
